<template>
	<view>
		<view class="class_h" style="background-color: #fff">
			<view class="topss" @click="return_step">					
				<image src="../../../../static/resource/back.png" mode="aspectFill" style="width: 74px;height: 30px;"></image>				
			</view>
			<text class="task_name">订单详情</text>
		</view>	
	
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==0)">
			<view class="wait_order flex" style="color: gray">
				<view>
					<u-icon
					  size="21"
					  :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">已取消</text>
			</view>					
		</view>
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==1)">			
			<view class="wait_order flex" style="color: gray">
				<view>
					<u-icon
					  size="21"
					  :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">待支付</text>
			</view>
			<view class="flex mt-10 align-center text-center" style="font-size: 28rpx;">
			   <u-count-down :time="order_list.order.pay_time * 1000" format="HH:mm:ss"></u-count-down>
			</view> 					
		</view>
		
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==2)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					 :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">待发货</text>
			</view>					
		</view>
		
		<view class="pt-30 flex justify-between align-center text-center pb-20 main-cur ml-20 mr-20"   style="flex-direction: row !important; "  v-if="(order_list.order.status==3)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					  :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">待收货</text>
			</view>
			<view class="flex align-center text-center mr-20" @click="paykd(order_list.order.id)">
				<text>物流信息</text>
				<u-icon name="arrow-right"  size="21" color="#888888 "></u-icon>
			</view>	
		</view>
		
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==6)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					 :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">租用中</text>
			</view>					
		</view>
		
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20" v-if="(order_list.order.status==7)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					 :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">归还中</text>
			</view>					
		</view>

		
		<view class="pt-30 flex flex-direction  text-center pb-20 main-cur ml-20 mr-20"  v-if="(order_list.order.status==4)">
			<view class="wait_orders flex" style="color: #AFACA1">
				<view class="flex align-center text-center">
					<u-icon
					  size="21"
					 :name="api_image+'/static/uplaod/20250721/1c2979f54b756b81f85a12c4f14a98602a78946b.png'"
					></u-icon>
					<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;">已完成</text>
				</view>
				<view class="flex mr-20 align-center text-center" @click="paykd(order_list.order.id)">
					<text style="font-size: 24rpx;color: #888888;" class="mr-5">物流信息</text>
					 <u-icon name="arrow-right"></u-icon>
				</view>
			</view>	
		</view>
		<view class="pt-30 flex flex-direction align-center text-center pb-20 main-cur ml-20 mr-20"  v-if="(order_list.order.status==5)">
			<view class="wait_order flex" style="color: #AFACA1">
				<view>
					<u-icon
					  size="21"
					 :name="api_image+'/static/uplaod/20250614/f09b8a1c6403115dd67892af5597442d145c4006.png'"
					></u-icon>
				</view>
				<text class="ml-10" style="color: #222222;margin-left: 16rpx;font-size: 32rpx;"> {{order_list.order.sales_status == 1?"售后中":order_list.order.sales_status == 2?"退款成功":"退款失败"}}</text>
			</view>	
		</view>
		<view class="main-cur pb-20 pt-10 ml-20 mr-20">
		    <view isLink  class="flex align-center mt-10 confirm-address-wrap" style="height: 110rpx;background-color: #fff;" @click="routeToNext(orderType)">
				<view slot="icon" class="flex  justify-start align-center text-center confirm-address-icon" style="width: 80rpx; height: 80rpx;">
					<image :src="api_image+'/uplaod/20250614/d2e67343494c1cae9cb36f293fa7fa2fe61eec45.png'"  mode="aspectFill" style="width: 63rpx; height: 65rpx;"></image>
				</view>				
				<view class="flex justify-between" style="width: 100%">
					<view  class="flex flex-direction ml-15">
						<view class="flex">
						   <view class="confirm-address-wrap-detail">{{order_list.express.province}}{{order_list.express.city}}{{order_list.express.area}}{{order_list.express.address}}</view>
						</view>
						<view class="mt-15" style="color: #555555 ;">					  
							<text class="text-lg">{{order_list.express.username}}</text>
							<text  class="ml-20 text-lg">{{order_list.express.phone}}</text>
						</view>
						
				    </view>				  			     
			    </view>
		    </view>				
		</view>		
		<view class="pl-20 pr-20 ml-20 mr-20 border-radius" style="background: #fff;margin-top: 20rpx;"> 
		    <view class="order_main">
				<view class="address-title">
					商品明细
				</view>   				
				<view class="flex pl-10 flex-direction" v-for="(item,index) in order_list.goods" :key="index">
					<view class="flex mt-10 mb-10">							
						<view slot='icon' class="flex align-center" >
							<image class="grid-img" :src="item.goods_logo" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
						</view>
						<view class="confirm-wrap-content flex flex-direction justify-between ml-10 mr-20 " slot='content' style="width: 80%;">
							<view>
							  <view class='flex align-center cell text-lg mb-10 mt-20'>{{item.goods_title}}</view>
							  <view class='flex align-center cell text-sm text-gray mt-15 justify-between'>
							     <text>{{item.goods_spec}}</text>
								
							  </view>
							   <view class='flex justify-between cell text-lg'>
								   <view class="flex text-bold">
										<text style="font-size: 28rpx;color: #FF2E00;margin-top: 10rpx;">￥</text>
										<text class="ml-5 mt-5" style="font-weight: bold;font-size: 40rpx;color: #FF2E00;">{{item.selling_price}}</text>
								   </view>
								  
							   </view>
							   
							</view>
						</view>
				    </view>					
		        </view>
		        <view class="pay_price  mt-20">
		        	 <text class="mr-20" style="color: #222222 ;">合计:</text>
					 <view class="flex text-bold">
					 	<text style="font-size: 28rpx;color: #FF2E00;margin-top: 3rpx;">￥</text>
					 	<text class="ml-5" style="font-weight: bold;font-size: 40rpx;color: #FF2E00;">{{order_list.order.pay_price}}</text>
					 </view>
		        </view>
			</view>
		</view>

	 
         <view class="flex flex-direction mt-20  pl-30 pr-30  main-cur ml-20 mr-20 pb-20 pt-30" v-if="order_list.use_money.counpon_min_point>0">
           <view class="flex justify-between ml-5 mr-5 mt-5 pb-5">
		   <view class="address-titles">
        	   优惠券
            </view>
            <view class="flex align-items: center;text-align: center;"   style="color: #36B3E9;">
        		<view style="background: #36B3E9;border-radius: 6rpx 6rpx 6rpx 6rpx;height: 45rpx;" class="align-items: center;text-align: center;">
        			<text class="mt-5 mb-5 ml-15 mr-15" style="font-weight: 400;font-size: 24rpx;color: #FFFFFF;">满{{order_list.use_money.counpon_min_point}}减{{order_list.use_money.redMoney}}</text>
        		</view>
        		<text class="ml-15" style="font-weight: bold;font-size: 32rpx;color: #36B3E9;">-￥{{order_list.use_money.redMoney}}</text>
        		
        	</view>		   
			 </view>		 
        </view>
	
		  
		
		<view class="flex flex-direction mt-20  pl-30 pr-30 main-cur ml-20 mr-20" style=" background: #fff;  line-height: 2.55555556;font-size: 26rpx;margin-bottom: 200rpx;">
			<view class="address-title" style="margin-left: -10rpx;">
			   订单信息
			</view>   
		   <view class="mb-30">				
				<view class="flex justify-between ml-5 mr-5 mt-5 pb-5">
					  <text   style="font-weight: 600;font-size: 30rpx;color:#5d5b5b;">下单时间</text>
					  <text class="text-sm">{{order_list.order.create_at}}</text>
				</view>		
				
				<view class="flex justify-between ml-5 mr-5 mt-5 pb-5">
				     <text   style="font-weight: 600;font-size: 30rpx;color:#5d5b5b;">支付单号</text>
					 <view class="">
						<text class="text-sm">{{order_list.order.pay_no}}</text>
					 	<text class="copy ml-20" @click="copy(order_list.order.pay_no)">复制</text>
					 </view>				     
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5">
					 <text   style="font-weight: 600;font-size: 30rpx;color:#5d5b5b;">应支付金额</text>
					 <text class="text-sm">￥{{order_list.order.real_price}}</text>
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5">
					 <text   style="font-weight: 600;font-size: 30rpx;color:#5d5b5b;">实际支付金额</text>
					 <text class="text-sm">￥{{order_list.order.real_price}}</text>
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5">
					 <text   style="font-weight: 600;font-size: 30rpx;color:#5d5b5b;">支付方式</text>
					 <text class="text-sm">微信</text>
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5" v-if="(order_list.order.pay_at !='0000-00-00 00:00:00')">
				    <text style="font-weight: 600;font-size: 30rpx;color: #5d5b5b;">支付时间</text>
				    <text class="text-sm">{{order_list.order.pay_at}}</text>
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5" v-if="(order_list.order.send_at !='0000-00-00 00:00:00')">
				    <text style="font-weight: 600;font-size: 30rpx;color: #5d5b5b;">发货时间</text>
				    <text class="text-sm">{{order_list.order.send_at}}</text>
				</view>
				
				<view class="flex justify-between ml-5 mr-5 mt-5  pb-5"lass="flex justify-between ml-5 mr-5 mt-15 border-b pb-15" v-if="(order_list.order.pack_at !='0000-00-00 00:00:00')">
				    <text style="font-weight: 600;font-size: 30rpx;color: #5d5b5b;">收货时间</text>
				    <text class="text-sm">{{order_list.order.pack_at}}</text>
				</view>	
				
			    
				
				
				
			
				
			
				
				
		  </view>  
		</view>	
		<view class="flex">
			
		</view>
	   	<t-submit-bar :show="order_list.order.status==1" :setting_money="order_list.order.pay_price" :goods_status="order_list.order.status+''"  :logistics="order_list.order.logistics+''" @cancelorder="cancel"  @confirm="wxconfirm"  :type="settle_type"></t-submit-bar>
		<t-submit-bar :show="order_list.order.status==3 && order_list.order.type == 1" :setting_money="order_list.order.pay_price" :goods_status="order_list.order.status+''"    @confirm="wxconfirm"  :type="settle_types"></t-submit-bar>
		<t-submit-bar :show="order_list.order.status==6" :orderId="orderId"   @confirm="wxconfirm"  :type="settle_types"></t-submit-bar>
	</view>
</template>

<script>
	import accesGoods from "@/components/accesGoods/index.vue";
	import QRCode from "@/utils/weapp-qrcode.js" //引入生成二维码的插件
	import submit from "@/components/submit-bar/index.vue";
	// import config from '@/utils/config.js';
	export default {
		components: {
		    "t-accesGoods":accesGoods,
			"t-submit-bar": submit,
		},
	 	data() {
	 		return {
				...getApp().globalData.config,
				orderId:'',
				order_list:{
					order:{
						storage:{}
					}
				},    
				shopInfo:{},
				showfee:false,
				atype:"1",				
				settle_type:9,
				settle_types:10,
				settle_types:66,
				showPay:true
			}
		},
		onLoad(options) {
			if(options.orderId){
				this.orderId=options.orderId
			}			
		},
		onShow() {
		  this.queryInfo()
		  
			// setTimeout(()=>{
			// 			this.reateQrcode()
						
			// },500)
		},
		methods:{	
			return_step(){
				this.$routers.router('/pages/order/index','navigateTo') 
			},
			//获取订单信息
			queryInfo(){
				let that=this
				let obj_data={
					token:uni.getStorageSync('userInfo').token,
					order_id:this.orderId
				}  
				this.$http.orderInfo(obj_data).then(res=>{
					if(res.resCode=="9999"){
					  that.order_list=res.data
					}else{
					  uni.showToast({title:res.resMessage,icon:"none"})
					}
				})  
			},
			addmoney(money1,money2){
				return money1 + money2;
			},
			...getApp().globalData.function,
			handleChangeGoods(imagePath){
				// console.log('imagePath',imagePath)
				 my.previewImage({
							      urls: [imagePath], // 需要预览的图片http链接列表
							      current: 0, // 当前显示图片的http链接
							    })
			},
			feeGoods(type){
				this.showfee=true
				this.atype=type
				this.$refs.accesList.OrderSpecs(this.orderId,type)
			},
			accesClose(){
				this.showfee=false
			},
			//查看快递
			paykd(orderId){
				uni.navigateTo({
					url:"/pages/pagesuser/shopOrder/orderKd/index?orderId="+orderId
				})
			},
			reateQrcode() {			
				var that = this;
				new QRCode('myQrcode', {
					text:config.api_url+'?type=1&orderId='+this.orderId,
					width: 200,
					height: 200,
					padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
					correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
					// callback: (res) => {
					//   // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
					//   that.data.qrcodePath = res.path;
					// }
				})
			},
			//复制
			copy(text){
				uni.setClipboardData({
					   data:text,//要被复制的内容
					   success:()=>{
						 uni.showToast({
						   title:"复制成功"
						 })
					   }
					});
			
			},
			//快递 购物车 确认收货
			wxconfirm(option){
				if(option.type=='kd'){
					uni.navigateTo({
						url:"/pages/pagesuser/shopOrder/orderKd/index?orderId="+this.orderId
					})
				}else if(option.type=='payok'){
					let that = this;
					this.$showModal({content: '您确定已经收到货物了吗？',title:'提示',  confirmColor:'#518FA0'}).then(res=>{
						if(res.confirm){
						  let obj_data={
							token:uni.getStorageSync('userInfo').token,
							login_type:'app',
							order_id:this.orderId
						  }
						  this.$http.confirm_receipt(obj_data).then(res=>{
							that.$showToast(res.resMessage) 
							setTimeout(()=>{
								 that.queryInfo()
							},3000)          
						  })
						}
					})
				} else if(option.type=='car'){
					let car={
						goodsId:this.order_list.goods[0].goods_id,
						specId:this.order_list.goods[0].goods_spec_id,
						number:1,
						token:uni.getStorageSync('userInfo').token,
					}
					this.$http.goodsCar(car).then(res => {
						if(res.resCode=="9999"){
						 uni.showToast({title:res.resMessage,icon: 'none'})      
						}else{					
						  uni.showToast({title:res.resMessage,icon: 'none'})        
						}
					})
				}else if(option.type=='pay'){
						let obj_data={
						  token:uni.getStorageSync('userInfo').token,
						  pay_no:this.order_list.order.pay_no,
						  pay_type:'wechat',
						  order_type:2,
						  orderId:this.order_list.order.id,
						}	
					    console.log('res',obj_data)
						this.$http.orderpay(obj_data).then(rest=>{
							if(rest.resCode=='9999'){
							    if(rest.resCode=='9999'){
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: rest.data.timeStamp,
										nonceStr: rest.data.nonceStr,
										package: rest.data.package,
										signType:rest.data.signType,
										paySign: rest.data.paySign,
										success: function (res) {											
											uni.switchTab({
												url:"/pages/order/index"
											})
										},
										fail: function (err) {
											uni.switchTab({
												url:"/pages/order/index"
											})
										},									
									});								   								   
							    }else{
							   	   uni.showToast({title:res.resMessage,icon:"none"}) 
							    }								   
							}else{
							   uni.showToast({title:res.resMessage,icon:"none"}) 
							}	
					   })	
				}
			  console.log('option',option)	
			},
			//取消订单
			cancel(){    
				let orderId= this.orderId
			    this.$showModal({content: '确定要取消订单吗？',confirmColor:'#518FA0'}).then(res=>{
			      if(res.confirm){
			        this.$http.orderCancel({orderId}).then(res=>{
			          this.$showToast(res.resMessage)
			          setTimeout(()=>{
			             this.queryInfo()
			          },2000)		          
			          return
			        })       
			      }else{
			      }
			    })
			},
			//确认支付
			dopay(goods_total,order_no){
				console.log('ok')
				
					let that=this
					let obj_data={
					  token:uni.getStorageSync('userInfo').token,
					  pay_no:order_no,
					  pay_type:'wechat'
					}	
				    console.log('res',obj_data)
					this.$http.orderpay(obj_data).then(rest=>{
						if(rest.resCode=='9999'){
						    if(rest.resCode=='9999'){
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: rest.data.timeStamp,
									nonceStr: rest.data.nonceStr,
									package: rest.data.package,
									signType:rest.data.signType,
									paySign: rest.data.paySign,
									success: function (res) {
										uni.navigateTo({
											url:"/pages/pagesuser/shopOrder/success/index"
										})
									},
									fail: function (err) {
										uni.navigateTo({
											url:"/pages/order/index"
										})
									},									
								});								   								   
						    }else{
						   	   uni.showToast({title:res.resMessage,icon:"none"}) 
						    }								   
						}else{
						   uni.showToast({title:res.resMessage,icon:"none"}) 
						}	
				   })				   
			}
		}
	}
</script>

<style>
	page{
	  background-color: #f3f6fb;
	}
	.confirm-address-wrap{
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}
	.confirm-address-wrap-detail{
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		
	}
	
	.submit{
		width: 100%;
		position: fixed;
		flex-direction: row;
		bottom: 0px;
		height: 65px;
		padding: 12px;
		box-sizing: border-box;
		background: #fff;
		overflow-x: auto; /* 允许横向滚动 */
		  white-space: nowrap; /* 防止项目换行 */
		
	}
	.btnsub{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25rpx;
	color: #fff;
	/* background: #518FA0; */
	border-radius: 23px;
	height: 38px;
	width: 230rpx;
	position: absolute;
	right: 20rpx;
	bottom: 40rpx;
	}
	.copy{
		font-weight: bold;
		font-size: 30rpx;
		color: #518FA0;
	}
	
	.address-title{
		display: flex;
		font-weight: 600;
		font-size: 16px;
		color: #222222 ;
		line-height: 18px;
		padding-left: 10px;
		padding-bottom: 10px;
		padding-top: 28rpx;
	}
	
	.wait_order{
		display: flex;
		align-items: center;
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
		color: #518FA0;
	}
	.wait_orders{
		display: flex;
	    justify-content: space-between;
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
		color: #518FA0;
	}
	
	.main-cur{
		display:flex;
		flex-direction:column;
		margin-top: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		/* padding: 20rpx 20rpx 35rpx 20rpx; */
		background-color: #ffff;	
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		
	}
	.pay_price{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-content: center;
		margin-top: -10rpx;
		margin-right: 20rpx;
		text-align: center;	
		font-size: 32rpx;
		color: #011F37;
		line-height: 7rpx;
		padding-bottom: 40rpx;
		padding-top: 40rpx;
		border-top: 1rpx solid #f0f0f0!important;
	}
	
	.mask {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  display: flex;
	  background-color: rgba(0, 0, 0, 0.7);
	  z-index: 9999;
	  flex-direction: column;
	  justify-content: flex-end;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  background: white;
	  border-top-right-radius: 20rpx;
	  border-top-left-radius: 20rpx;
	}
	
	.top {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  border-bottom: 1rpx solid #d3cfcf;
	}
	
	.top-text {
	  font-size: 30rpx;
	  width: 150rpx;
	  height: 100rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	}
	
	.top-left-color {
	  color: #878787;
	}
	
	.top-left-color-hover {
	  color: #f1eaea;
	}
	
	.top-right-color {
	  color: #1296DB;
	}
	
	.top-right-color-hover {
	  color: #82ccf3;
	}
	
	.item {
	  width: 100%;
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 18px;
	}
	.productNameText{
		width: 420rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		word-break:break-all;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;overflow:hidden;
		font-size: 24rpx;
		/* color: #011F37; */
		padding-right: 20rpx;
	}
	
	
	.shop_info{
	  background: #fff;
	   width: 100%;
	   height: auto;
	   display: flex;
	  flex-direction: row;
	  font-family: "Microsoft YaHei";
	}
	.shop_detail{
	  font-size: 28rpx;
	  margin: 20rpx 50rpx;
	}
	.shop_detail_l2{    
	  display: flex;
	  flex-direction: row;
	  color: gray;
	  font-size: 13px;
	  margin-left: -19px;
	  width: 490rpx;
	  margin-top: 10rpx;
	}
	.shop_type{
	  display: flex;
	  flex-direction: row;
	  padding: 17rpx;
	  width: 157rpx;
	  background: #fff;
	  height: 25rpx;
	  border-radius: 35rpx;
	  margin-top: 46rpx;
	  margin-right: 19rpx;
	  border: 2rpx solid rgb(216, 210, 210);
	  box-shadow: 0 0 5px rgb(202, 196, 196);
	}
	
	.shop_type_l1{
	  background: #000000;
	    color: white;
	    text-align: center;
	    font-size: 28rpx;
	    margin: -12rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	}
	
	.shop_type_l2{
	 
	    color: rgb(165, 155, 155);
	    text-align: center;
	    font-size: 28rpx;
	    margin: -10rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	  
	}
	.grid-img{  
	  width: 160rpx;
	  height: 160rpx;
	  margin: 15rpx;
	  border-radius: 10rpx;
	  
	}
	
	.qhm{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 14px;
	  background: #f5f2f2;
	  border-width: 50px;
	  border-radius: 10rpx;
	  width: 140rpx;
	  margin-left: 42%;
	  margin-top:20rpx;
	  border-color: #000;
	  color: rgb(82, 76, 76);
	}
	
	.qhm3{
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;  
	}
	.class_h{
		display: flex;
		flex-direction: column;
		background-size: 100% 100%;
		padding-bottom: 190rpx;
		position: relative;
		z-index: 99999
	}
		
	.topss{
		position: fixed;
		padding-top: 110rpx;
		font-weight: 600;
		font-size: 38rpx;
		color: #333333;
		line-height: 49rpx;
		 left: 30rpx
	}
	.task_name{
	   position: fixed;
	    top: 110rpx;       /* 顶部距离 */
	    left: 50%;         /* 左边从屏幕中间开始 */
	    transform: translateX(-50%); /* 水平居中 */
	    font-weight: 600;
	    font-size: 38rpx;
	    color: #333333;
	    line-height: 49rpx;
	    text-align: center; /* 内容居中 */
	}
	

</style>